<template>
  <el-dialog title="导入" v-model="show" width="500px" :append-to-body="true" :close-on-press-escape="true" :close-on-click-modal="true">
    <div class="dialog_center form" v-loading="uploadLoading">
      <el-upload
        class="upload-demo"
        action=''
        drag
        multiple
        :show-file-list='false'
        :auto-upload='false'
        :on-change='importData'
        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip">只能上传excel文件，且不超过500kb</div>
        </template>
      </el-upload>
    </div>
    <template #footer>
      <div class="dialog_footer">
        <a :href="downLoadTempUrl"><el-button type="primary" size="mini" v-loading="uploadLoading" style="margin-right: 10px">下载模板</el-button></a>
        <el-button @click="close" size="mini">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
export default {
  mixins: [],
  components: {},
  data () {
    return {
      show: false,
      loading: true,
      uploadLoading: false,
      update: false,
    }
  },
  props: {
    downLoadTempUrl: {
      type: String,
      default: null
    }
  },
  emits: ['importEvent'],
  mounted () {
  },
  methods: {
    /**
     * 打开对话框
     */
    async open (param = {}) {
      this.show = true
      this.loading = true
      this.editLoading = false
      this.update = false
      this.type = param.type || null
    },
    /**
     * 关闭对话框
     */
    close () {
      this.show = false
    },

    /**
     * 导入文件
     *
     * @param img
     */
    importData (file) {
      let self = this
      self.uploadLoading = true
      this.$emit("importEvent", file, function () {
        self.uploadLoading = false
        self.close()
      })
    }
  },
  watch: {}
}
</script>
<style scoped lang="scss">
:deep(.el-upload){
  width: 100%;
  .el-upload-dragger{
    width: 100%;
  }
}
.dialog_footer{
  text-align: center;
}
</style>
